<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Admin Dashboard - Home</title>
<meta name="description" content="">
<meta name="author" content="templatemo">
<!-- 
    Visual Admin Template
    https://templatemo.com/tm-455-visual-admin
    -->
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700'
	rel='stylesheet' type='text/css'>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/templatemo-style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
	<!-- Left column -->
	<div class="templatemo-flex-row">
		<div class="templatemo-sidebar">
			<header class="templatemo-site-header">
				<div class="square"></div>
				<h1>Visual Admin</h1>
			</header>
			<div class="profile-photo-container">
				<img src="images/profile-photo.jpg" alt="Profile Photo"
					class="img-responsive">
				<div class="profile-photo-overlay"></div>
			</div>
			<!-- Search box -->
			<!--<form class="templatemo-search-form" role="search">
				<div class="input-group">
					<button type="submit" class="fa fa-search"></button>
					<input type="text" class="form-control" placeholder="Search"
						name="srch-term" id="srch-term">
				</div>
			</form>-->
			<div class="mobile-menu-icon">
				<i class="fa fa-bars"></i>
			</div>
			<nav class="templatemo-left-nav">
				<ul>
					<li><a href="index.html"><i class="fa fa-home fa-fw"></i>主页</a></li>
					<li><a href="Memorize_words.html"><i
							class="fa fa-bar-chart fa-fw"></i>背单词</a></li>
					<li><a href="Ranking.html"><i class="fa fa-database fa-fw"></i>排行榜</a></li>
					<li><a href="words.html" class="active"><i
							class="fa fa-map-marker fa-fw"></i>words</a></li>
					<li><a href="records.html"><i class="fa fa-users fa-fw"></i>单词记录</a></li>
					<li><a href="Test.html"><i
							class="fa 	fa fa-align-justify fa-fw"></i>单词复习</a></li>
					<li><a href="myinfo.html"><i class="fa fa-bar-chart fa-fw"></i>个人信息</a></li>
					<li><a href="setting.html"><i class="fa fa-sliders fa-fw"></i>设置</a></li>
					<li><a href="../login&regist.html"><i
							class="fa fa-eject fa-fw"></i>注销</a></li>
				</ul>
			</nav>
		</div>

		<div class="col-1 wo">
			<select class="form-control xlk" id="sjxzxlk">
				<option  id="sjxzxlk1" value="cet_4">四级单词</option>
				<option  id="sjxzxlk2" value="cet_6">六级单词</option>
				<option  id="sjxzxlk3"  value="cet_4_h">四级高频</option>
				<option  id="sjxzxlk4"  value="ky">考研单词</option>
			</select>
			<div
				class="panel panel-default templatemo-content-widget white-bg no-padding templatemo-overflow-hidden">
				<i class="fa fa-times"></i>
				<div class="panel-heading templatemo-position-relative">
					<h2 class="text-uppercase">Word list</h2>
				</div>
				<div class="table-responsive">
					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<td>单词</td>
								<td>音标</td>
								<td>词根</td>
								<td>中文翻译</td>
							</tr>
						</thead>
						<tbody id = "words">
							<tr>
								<td>等待加载</td>
								<td>等待加载</td>
								<td>等待加载</td>
								<td>等待加载</td>
							</tr>

						</tbody>
					</table>
				</div>
			</div>
			<div class="form-group text-right" style="text-align: center;">
		        <button type="submit" class="templatemo-blue-button" id="nex">下一页</button>
	        </div>
		</div>
		
	</div>
	

    
	<!-- JS -->
	<script src="js/jquery-1.11.2.min.js"></script>
	<!-- jQuery -->
	<script src="js/jquery-migrate-1.2.1.min.js"></script>
	<!--  jQuery Migrate Plugin -->
	<!-- <script src="https://www.google.com/jsapi"></script>  Google Chart -->
	<script>

var type="cet_4";
var page = 1;
$("#nex").click(function(){
	page+=1;
	$.ajax({
 	type:"get",
 	url:"../getwordslist",
 	async:true,
 	data:"dbname="+type+"&page="+page,
 	success:function(res){
 		words=JSON.parse(res);
 		allhtml = "";
 		for(var i=0;i<words.length;i++){
 			allhtml+=
 			"<tr>\r\n" + 
			"<td>"+words[i]["word"]+"</td>\r\n" + 
			"<td>"+words[i]["accent"]+"</td>\r\n" + 
			"<td>"+words[i]["word_etyma"]+"</td>\r\n" + 
			"<td>"+words[i]["mean_cn"]+"</td>\r\n" + 
			"</tr>"
 		}
 		$("#words").html(allhtml);

 	}
 		
 });
})
$.ajax({
 	type:"get",
 	url:"../getwordslist",
 	async:true,
 	data:"dbname="+type+"&page="+page,
 	success:function(res){
 		words=JSON.parse(res);
 		allhtml = "";
 		for(var i=0;i<words.length;i++){
 			allhtml+=
 			"<tr>\r\n" + 
			"<td>"+words[i]["word"]+"</td>\r\n" + 
			"<td>"+words[i]["accent"]+"</td>\r\n" + 
			"<td>"+words[i]["word_etyma"]+"</td>\r\n" + 
			"<td>"+words[i]["mean_cn"]+"</td>\r\n" + 
			"</tr>"
 		}
 		$("#words").html(allhtml);

 	}
 		
 });
 
$("#sjxzxlk").change(function(){
	type = $("#sjxzxlk").children("option:selected").attr("value");
	
	$.ajax({
 		type:"get",
 		url:"../getwordslist",
 		async:true,
 		data:"dbname="+type+"&page="+page,
 		success:function(res){
 		words=JSON.parse(res);
 		allhtml = "";
 		for(var i=0;i<words.length;i++){
 			allhtml+=
 			"<tr>\r\n" + 
			"<td>"+words[i]["word"]+"</td>\r\n" + 
			"<td>"+words[i]["accent"]+"</td>\r\n" + 
			"<td>"+words[i]["word_etyma"]+"</td>\r\n" + 
			"<td>"+words[i]["mean_cn"]+"</td>\r\n" + 
			"</tr>"
 		}
 		$("#words").html(allhtml);

 	}
 		
    });
});

 
    	
     
    </script>
	<script type="text/javascript" src="js/templatemo-script.js"></script>
	<!-- Templatemo Script -->

</body>
</html>